<template>
    <el-card class="box-card">
        <el-button type="primary" text @click="dialogFormVisible = true">+新增</el-button>
        <el-table :data="myApplyList" style="width: 100%" table-layout="fixed" empty-text="无">
            <el-table-column prop="gmtCreate" label="申请时间"/>
            <el-table-column prop="isPass" label="审核状态" />
            <el-table-column prop="reason" label="审核原因" />
        </el-table>
        <el-dialog v-model="dialogFormVisible" title="申请专家" width="25%">
            <el-form :model="applicationForm">
                <el-form-item label="学历" :label-width="70">
                    <el-input v-model="applicationForm.qualification1" placeholder="格式：xx大学xx专业博士" class="ipt" />
                </el-form-item>
                <el-form-item label="介绍" :label-width="70">
                    <el-input v-model="applicationForm.introduce" show-word-limit maxlength="60" :rows="3"
                        type="textarea" placeholder="个人介绍" class="ipt" />
                </el-form-item>
                <el-form-item label="个人照片" :label-width="70">
                    <el-input type="file" accept="image/*" v-model="applicationForm.pic1" :onchange="addPhoto"
                        class="ipt" />
                </el-form-item>
                <el-form-item label="证明材料" :label-width="70">
                    <el-input type="file" accept="image/*" v-model="applicationForm.pic2" :onchange="addCertificate"
                        class="ipt" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span>
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="application">提交</el-button>
                </span>
            </template>
        </el-dialog>
    </el-card>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { apiAddQualificationOnePic, apiAddQualificationTwoPic, apiApply, apiQueryMyApply } from '@/apis/application'
interface myApplyModel {
    gmtCreate: string,
    isPass: number | string,
    reason: string,
}
let id = sessionStorage.getItem('id')
let realName = sessionStorage.getItem('realName')
let dialogFormVisible = ref(false);
let applicationForm = reactive({ introduce: '', qualification1: '', qualification2: '', qualification3: '', pic1: '', pic2: '', id, realName });
let myApplyList = reactive<Array<myApplyModel>>([]);
let addPhoto = async (e: Event) => {
    if (e.target != null) {
        const target = e.target as HTMLInputElement;
        const file: File = (target.files as FileList)[0];
        let formData = new FormData();
        formData.append('pic', file, file.name);
        let address = await apiAddQualificationOnePic(formData);
        applicationForm.qualification2 = address.data.data.picUrl;
        console.log(address.data.data.picUrl)
    }
};
let addCertificate = async (e: Event) => {
    if (e.target != null) {
        const target = e.target as HTMLInputElement;
        const file: File = (target.files as FileList)[0];
        let formData = new FormData();
        formData.append('pic', file, file.name);
        let address = await apiAddQualificationTwoPic(formData);
        applicationForm.qualification3 = address.data.data.picUrl;
    }
}
let application = async () => {
    let res = await apiApply(applicationForm);
    if (res.data.success) {
        ElMessage.success('提交申请成功');
    } else {
        ElMessage.error('提交申请失败');
    }
    dialogFormVisible.value = false;
    console.log(res)
}

let getQueryApplyList = async () => {
    let res = await apiQueryMyApply(id);
    let list: myApplyModel = res.data.data.expertCheck;
    myApplyList.push(list)
    myApplyList.forEach((item,index,arr)=>{
        if(item['isPass'] == 0){
            arr[index]['isPass'] = "未审核";
            arr[index]['reason'] = "无";
        }else if(item['isPass'] == 1){
            arr[index]['isPass'] = "已通过";
            arr[index]['reason'] = "无";
        }else{
            arr[index]['isPass'] = "不通过";
        }
    })
    console.log(myApplyList, 123)
}
getQueryApplyList()
</script>
<style scoped lang="scss">
.box-card {
    margin-top: 20px;
}
</style>